<template>
	<view class="pageItem">
		<view class="head">
			<view class="back iconfont" @tap="backPage">&#xe8b7;</view>
			<view class="seach">
				<view class="lang">
					<picker @change="onLocaleChange" :value="l_index" :range="local_arr" range-key="txt">
						<label class="iconfont l_icon">&#xe79a;</label>
						{{local_arr[l_index].txt}}
					</picker>
				</view>
			</view>
			<!-- <view class="hot">
				<block v-for="(item,index) in cate_list" :key="'h_'+index">
					<view class="btn" :class="movie_type == index?'btn_s':''" :data-type="index" :data-id="item.id" @click="movieTypeChange">
					      {{show_ct(index)}}
					</view>
				</block>
			</view> -->
		</view>

		<view class="logo">
			<image class="logo_img" src="/static/logo.png" mode="widthFix"></image>
			<view class="l_txt">{{$t('locale.app')}}</view>
		</view>
		<view class="main_item">
			<!-- <view class="input_box">
				<view class="iconfont icon">&#xe678;</view>
				<input class="inp" v-model="email" type="text" :placeholder="$t('public.mail_tip')"
					placeholder-class="input_no_txt" />
			</view>
			<view class="input_box">
				<view class="iconfont icon">&#xe677;</view>
				<block v-if="is_see == 0">
					<input class="inp" v-model="pass" type="password" :placeholder="$t('public.password_inter_tip')"
						placeholder-class="input_no_txt" />
					<view class="see iconfont" @click="set_see(1)">&#xe604;</view>
				</block>
				<block v-else>
					<input class="inp" v-model="pass" type="text" :placeholder="$t('public.password_inter_tip')"
						placeholder-class="input_no_txt" />
					<view class="see iconfont" @click="set_see(0)">&#xe6b5;</view>
				</block>
			</view> -->
			<!-- <view class="m_btn sub" @click="to_login">{{$t('welcome.sign_in')}}</view> -->
			<view class="m_btn sub" @click="to_qblogin_v">{{$t('welcome.sign_in')}}</view>
			<!-- <view class="m_btn sub" @click="to_facebook_login">facebook登录</view> -->
			<!-- <view class="m_tip">
				{{$t('public.no_account')}} ?
				<label class="tip2" @click="$r('/pages/public/register')">{{$t('public.register_txt')}}</label>
			</view>
			<view class="m_tip">
				{{$t('已有賬號')}} ?
				<label class="tip2" @click="$r('/pages/public/retrieve')">{{$t('找回密碼')}}</label>
			</view>
			<view class="agree">
				<view class="iconfont a_icon" v-if="!agree" @click="agreeChange(true)">&#xe731;</view>
				<view class="iconfont a_icon a_icon_s" v-if="agree" @click="agreeChange(false)">&#xe730;</view>
				<view class="a_txt">
					{{$t('public.agree_txt')}}
					<view class="a_t2" @click="$r('/pages/news/newsDetail?ori=xy')">《{{$t('public.user_cc')}}》
					</view>
					<view class="a_t2" @click="$r('/pages/news/newsDetail?ori=ys')">
						《{{$t('public.privacy_cc')}}》</view>
				</view>
			</view> -->
		</view>

		<!-- 弹窗 -->
		<view class="pupu_box" @tap="closePupu" v-if="pupu">
			<view class="pupu_show" @tap.stop="">
				<view class="pupu_img">
					<block v-for="(item, index) in wallet_app_list">
						<view class="img" @click="to_qblogin(item.app_type)">
							<image :src="item.img" mode="scaleToFill"></image>
							<view class="text">{{$t(item.title)}}</view>
						</view>
					</block>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	// import Web3 from 'web3';
	import {
		TpWallet,
		metaWallet,
		trustWallet,
		walletUtil
	} from 'common/dapp_web3_x'


	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				is_see: 0,
				agree: true,
				email: '',
				pass: '',
				l_index: 0,
				local_arr: [{
					lang: '',
					txt: ''
				}, ],
				web3: null,
				code: '',
				walletAddress: '',
				wallet_app_list: [{
						app_type: 1,
						img: "/static/img/TokenPocket.png",
						title: "TokenPocket"
					},
					{
						app_type: 2,
						img: "/static/img/MetaMask.png",
						title: "MetaMask"
					},
					{
						app_type: 3,
						img: "/static/img/TrustWallet.png",
						title: "TrustWallet"
					},
					{
						app_type: 99,
						img: "/static/img/other.png",
						title: "其他"
					},
				],
				pupu: false,
			};
		},
		async onLoad(opt) {
			let code = opt.code || 0;
			if (code) {
				uni.setStorageSync('invite_code', code);
				this.code = code
			}
			this.local_arr = [{
					lang: 'en',
					txt: this.$t('locale.en')
				},
				{
					lang: 'zh-Hant',
					txt: this.$t('locale.zh-hant')
				},
				{
					lang: 'jp',
					txt: this.$t('locale.jp')
				}
			]
			let that = this;
			this.applicationLocale = uni.getLocale();
			this.local_arr.forEach((item, index) => {
				if (item.lang == this.applicationLocale) {
					that.l_index = index;
				}
			})
			uni.onLocaleChange((e) => {
				this.applicationLocale = e.locale;
				this.set_note();
			});


		},
		methods: {
			...mapMutations(['login']),

			onLocaleChange(e) {
				this.l_index = e.detail.value;
				let code = this.local_arr[e.detail.value].lang;
				uni.setLocale(code);
				this.$i18n.locale = code;
				// #ifdef H5
				location.reload();
				// #endif
			},
			closePupu() {
				let that = this;
				that.pupu = !that.pupu;
			},
			set_see(flag) {
				this.is_see = flag;
			},
			set_note() {
				let lang_id = 0;
				switch (this.applicationLocale) {
					case 'en':
						lang_id = 1;
						break;
					case 'jp':
						lang_id = 2;
						break;
				};
			},

			to_login() {

				if (!this.agree) {
					uni.showToast({
						title: this.$t('public.cc_tip'),
						icon: "none"
					})
					return
				}
				const {
					email,
					pass
				} = this;
				if (!email || !pass) {
					this.showMsg(this.$t('system.tip25'));
					return false;
				}
				if (uni.$u.test.email(email) == false) {
					this.showMsg(this.$t('system.tip22'));
					return false;
				}
				uni.$u.throttle(this.real_login, 500)
			},
			real_login() {
				let url = this.site_url + 'api/login/do_login';
				const {
					email,
					pass
				} = this;
				let param = {
					email: email,
					pass: pass
				}
				this.areq(url, param, 'POST').then(res => {

					if (res.code == 1) {
						this.login(res.data);
						uni.setStorageSync('token', res.token);
						uni.setStorageSync('pid', 0);
						try {
							this.showMsg(this.$t('login.success'), 1500, false, 'success');
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/my/my'
								})
							}, 800);

						} catch (err) {
							//	this.j(err);
						}
					} else {
						this.showMsg(res.msg);
					}
				})
			},
			agreeChange(_flag) {
				this.agree = _flag;
			},
			backPage() {
				uni.navigateBack({});
			},
			async to_qblogin_v() {
				this.pupu = true
			},
			async to_qblogin(app_type) {
				let that = this;
				//判断钱包 和 判断哪个链的
				let wallet_sdk = walletUtil.reqWallet(this, app_type)
				let accounts = await wallet_sdk.getAddress(this)
				//用钱包获取签名
				let res = await that.areq(that.site_url + 'api/login/getNonce', {
					address: accounts
				}, 'POST');
				let nonce = res.data.nonce;
				let sign = await wallet_sdk.signMessage(this, nonce)

				//登录
				let res1 = await that.areq(that.site_url + 'api/login/qb_login', {
					address: accounts,
					sign: sign,
					agent_code: that.code,
					wallet_type: wallet_sdk.wallet_type
				}, 'POST')
				if (res1.code == 1) {
					that.login(res1.data);
					uni.setStorageSync('token',
						res1
						.token);
					uni.setStorageSync('pid', 0);
					try {
						that.showMsg(that.$t('login.success'), 1500, false, 'success');
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/my/my'
							})
						}, 800);
					} catch (err) {}
				} else {
					that.showMsg(res1.msg);
				}

				return;


				// if (window.ethereum) {
				// 	this.web3 = new Web3(window.ethereum);
				// 	try {
				// 		let accounts = await this.web3.eth.requestAccounts();
				// 		that.walletAddress = accounts[0]
				// 	} catch {
				// 		return false;
				// 	}
				// 	let res = await that.areq(that.site_url + 'api/login/getNonce', {
				// 		address: that.walletAddress
				// 	}, 'POST');
				// 	let sign = await that.web3.eth.personal.sign(res.data.nonce, that.walletAddress)
				// 	let chainId = await that.web3.eth.getChainId() //鏈id
				// 	let wallet_type = 0;
				// 	if (chainId == 56) {
				// 		wallet_type = 1;
				// 	} else if (chainId == 1) {
				// 		wallet_type = 2;
				// 	} else {
				// 		that.showMsg(that.$t('請選擇幣安或者以太坊鏈'));
				// 		return;
				// 	}
				// 	let res1 = await that.areq(that.site_url +
				// 		'api/login/qb_login', {
				// 			address: that.walletAddress,
				// 			sign: sign,
				// 			agent_code: that.code,
				// 			wallet_type: wallet_type
				// 		}, 'POST')
				// 	if (res1.code == 1) {
				// 		that.login(res1.data);
				// 		uni.setStorageSync('token',
				// 			res1
				// 			.token);
				// 		uni.setStorageSync('pid', 0);
				// 		try {
				// 			that.showMsg(that.$t('login.success'), 1500, false, 'success');
				// 			setTimeout(() => {
				// 				uni.switchTab({
				// 					url: '/pages/my/my'
				// 				})
				// 			}, 800);
				// 		} catch (err) {}
				// 	} else {
				// 		that.showMsg(res1.msg);
				// 	}

				// } else if (window.tronLink) {
				// 	let res = await window.tronLink.request({
				// 		method: 'tron_requestAccounts'
				// 	});

				// 	try {
				// 		that.walletAddress = window.tronLink.tronWeb.defaultAddress.base58
				// 	} catch (e) {
				// 		return false;
				// 	}

				// 	console.log(that.walletAddress)
				// 	res = await that.areq(that.site_url + 'api/login/getNonce', {
				// 		address: that.walletAddress
				// 	}, 'POST');
				// 	if (res.code != 1) {
				// 		return;
				// 	}
				// 	let signedString = ''
				// 	try {
				// 		console.log(window.tronLink.tronWeb.trx)
				// 		signedString = await window.tronLink.tronWeb.trx.signMessageV2(res.data.nonce);
				// 	} catch (e) {
				// 		return;
				// 	}
				// 	res = await that.areq(that.site_url + 'api/login/qb_login', {
				// 		address: that.walletAddress,
				// 		sign: signedString,
				// 		agent_code: that.code,
				// 		wallet_type: 3
				// 	}, 'POST');
				// 	console.log(res)
				// 	if (res.code != 1) {
				// 		that.showMsg(res.msg);
				// 		return;
				// 	}
				// 	that.login(res.data);
				// 	uni.setStorageSync('token', res
				// 		.token);
				// 	uni.setStorageSync('pid', 0);
				// 	try {
				// 		that.showMsg(that.$t('login.success'),
				// 			1500, false, 'success');
				// 		setTimeout(() => {
				// 			uni.switchTab({
				// 				url: '/pages/my/my'
				// 			})
				// 		}, 800);
				// 	} catch (err) {}
				// } else {
				// 	that.showMsg(that.$t('請選擇幣安或者以太坊鏈'));
				// }

			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #333;
	}

	.head {
		width: 100%;
		position: fixed;
		z-index: 98;
		top: 0;
		padding: calc(var(--status-bar-height) + 5vw) 4% 2vw;
		background: transparent;
		display: flex;
		align-items: center;

		.back {
			color: #fff;
			flex: 1;
		}

		.seach {
			display: flex;
			align-items: center;

			.s_con {
				flex: 1;
				padding: 0 4vw;
				background: $main_color2_s;
				height: 12vw;
				display: flex;
				align-items: center;
				border-radius: 7vw;

				.h_icon {
					font-size: 5vw;
					color: $main_color_s;
				}

				.h_input {
					flex: 1;
					margin: 0 3vw;
					line-height: 8vw;
					color: $main_color5;
				}

				.s_icon {
					width: 5vw;
				}
			}

			.lang {
				z-index: 2;
				right: -4vw;
				padding: 2vw;
				background: #fff;
				height: 10vw;
				font-size: 3.8vw;
				color: #222;
				font-weight: bold;
				margin-left: 4vw;
				border-radius: 2vw;

				.l_icon {
					font-size: 4vw;
					margin-right: 1vw;
				}
			}
		}

		.hot {
			margin-top: 3vw;
			width: 100%;
			overflow: hidden;
			overflow-x: auto;
			white-space: nowrap;

			.btn:not(:first-of-type) {
				margin-left: 2vw;
			}

			.btn {
				display: inline-block;
				padding: 2vw 3vw;
				background: $main_color2_s;
				color: $main_color5;
				font-size: 3.5vw;
				border-radius: 2vw
			}

			.btn_s {
				background: $main_color_s;
				color: #fff;
			}
		}
	}

	.logo {
		width: 100%;
		height: 60vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		// background: $main_color2;
		margin-top: 20vh;

		.logo_img {
			width: 18vw;
			height: 18vw;
		}

		.l_txt {
			font-size: 4vw;
			color: #fff;
			font-weight: bold;
			padding-top: 5vw;
			letter-spacing: 0.5vw;
		}
	}

	.main_item {
		width: 100%;
		padding: 10vw 10% 0;

		.input_box:not(:first-of-type) {
			margin-top: 4vw;
		}

		.input_box {
			width: 100%;
			height: 15vw;
			border: 1rpx solid $main_color2_s;
			display: flex;
			align-items: center;
			padding: 2vw 4vw;
			border-radius: 2vw;

			.see {
				color: #fff;
			}

			.icon {
				width: 6vw;
				text-align: center;
				font-size: 5vw;
				color: $main_color_s2;
			}

			.inp {
				flex: 1;
				padding: 0 4vw;
				line-height: 11vw;
				font-size: 4.2vw;
				color: #fff;
			}
		}

		.m_btn {
			margin-top: 6vw;
			width: 100%;
			height: 13vw;
			line-height: 13vw;
			border-radius: 2vw;
			text-align: center;
			font-size: 4.2vw;
			background: $main_color_s2;
			color: $main_color5;
			font-weight: bold;
			letter-spacing: 1vw;
		}

		.m_tip {
			width: 100%;
			margin-top: 8vw;
			text-align: center;
			font-size: 3.8vw;
			color: $main_color4;

			.tip2 {
				margin-left: 2vw;
				color: $main_color;
			}
		}

		.agree {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 3.6vw;
			color: #999999;
			margin-top: 11vw;

			.a_icon {
				width: 5vw;
				height: 5vw;
				font-size: 4vw;
				color: #C8C8C8;
				margin-right: 2vw;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.a_icon_s {
				color: $main_color;
				background: $main_color2;
			}

			.a_txt {
				display: flex;
				align-items: center;
				line-height: 5vw;

				.a_t2 {
					color: $main_color;
				}
			}
		}
	}

	.pupu_box {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}

	.pupu_box .pupu_show {
		width: 100%;
		background-color: #fff;
		border-radius: 4vw 4vw 0 0;
		padding: 5vw 4vw;
		position: relative;
	}

	.pupu_box .pupu_show .pupu_img {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pupu_box .pupu_show .pupu_img .img {
		width: 16vw;
		border-radius: 1vw;
		margin-left: 10vw;
	}

	.pupu_box .pupu_show .pupu_img .img:nth-child(1) {
		margin-left: 0;
	}

	.pupu_box .pupu_show .pupu_img .img image {
		width: 100%;
		height: 16vw;
		border-radius: 1vw;
	}

	.pupu_box .pupu_show .pupu_img .img .text {
		font-size: 3.2vw;
		color: #666;
		margin-top: 1vw;
		text-align: center;
	}
</style>